<template>
  <div>
    <!-- <my-header></my-header> -->
    <div class="content">
      <el-table size="small" :data="listData" highlight-current-row border element-loading-text="拼命加载中" style="width: 100%;">

        <el-table-column sortable prop="id" label="编号" width="190" show-overflow-tooltip>
        </el-table-column>
        <el-table-column sortable prop="name" label="名称" width="190" show-overflow-tooltip>
        </el-table-column>
        <el-table-column sortable prop="keyword" label="主题" width="190" show-overflow-tooltip>
        </el-table-column>
        <el-table-column sortable prop="picture" label="图片" width="190" show-overflow-tooltip>
        </el-table-column>
        <el-table-column sortable prop="comment" label="评论" width="190" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination style="margin-bottom: 50px"></pagination>
  </div>
</template>

<script>
import { reqAttractionList } from "@/api/index";
import MyHeader from "@/components/MyHeader.vue";
import Pagination from "@/components/Pagination.vue";

export default {
  components: { MyHeader, Pagination },
  name: "manageAttraction",
  data() {
    return {
      listData: [
        {
          id: "1",
          name: "hello",
          keyword: "key",
          picture: "pic",
          comment: "ok",
        },
      ],
    };
  },
  mounted() {
    reqAttractionList().then((res) => {
      // console.log("res", res);
      this.listData = res.data.records;
      console.log("list", this.listData);
    });
  },
};
</script>

<style scoped>
.content {
  margin-top: 50px;
  margin-right: 200px;
  margin-left: 200px;
  margin-bottom: 50px;
}
</style>
